.demo1-box {
    width: 100%;
    height: 600px;
    background-color: black;
    filter: contrast(50);
    display: flex;
    justify-content: center;
    align-items: center;

    .box1,
    .box2 {
        width: 100px;
        height: 100px;
        background-color: azure;
        filter: blur(5px);
    }

    .box1 {
        animation: rl .8s linear infinite alternate;
    }

    .box2 {
        animation: rt .8s linear infinite alternate;
    }
}

@keyframes rl {
    0% {
        transform: rotate(0deg) translate(-80px);

    }

    100% {
        transform: rotate(45deg) translate(60px);
        border-radius: 50%;
    }
}

@keyframes rt {
    0% {
        transform: rotate(0deg) translate(80px);

    }

    100% {
        transform: rotate(-45deg) translate(-60px);
        border-radius: 50%;
    }
}